<template>
  <div class="login-content">
    <img class="banner" src="@/assets/images/login/banner.png" alt="banner" />

    <div class="login-box">
      <div class="left-box">
        <img src="@/assets/images/login/icon.png" alt="illustration" />
      </div>

      <div class="right-box">
        <h2 class="title">后台登录</h2>
        <div class="form-wrapper">
          <a-form
            :model="formState"
            layout="vertical"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-form-item
              name="email"
              :rules="[{ required: true, message: '请输入管理员邮箱账号!' }]"
            >
              <a-input
                v-model:value="formState.email"
                size="large"
                placeholder="请输入管理员邮箱账号"
              >
                <template #prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item
              name="password"
              :rules="[{ required: true, message: '请输入密码!' }]"
            >
              <a-input-password
                v-model:value="formState.password"
                size="large"
                placeholder="请输入密码"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item>
              <a-button
                :disabled="disabled"
                type="primary"
                size="large"
                block
                html-type="submit"
              >
                立即登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>

    </div>

    <div class="footer-box">
      <Footer type="none" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import Footer from "@/components/Common/footer.vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { login as loginApi, system } from "@/api/index";
import { useUserStore, useSystemStore } from "@/store";
import { setToken } from "@/utils";

interface FormState {
  email: string;
  password: string;
}

const formState = reactive<FormState>({
  email: "",
  password: "",
});

const loading = ref(false);
const router = useRouter();
const userStore = useUserStore();
const SystemStore = useSystemStore();

const handleSubmit = async () => {
  if (loading.value) {
    return;
  }
  loading.value = true;
  try {
    let res: any = await loginApi.login(formState.email, formState.password);
    setToken(res.data.token);
    await getSystemConfig();
    await getUser();

    message.success("登录成功");
    router.push('/dashboard')
  } catch (e) {
    console.error("错误信息", e);
    message.error("登录失败");
  } finally {
    loading.value = false;
  }
};

const getUser = async () => {
  let res: any = await loginApi.getUser();
  // console.log('-----------', res)
  userStore.setUserInfo(res.data)
  userStore.setPermissions(res.data.permissions)
};

const getSystemConfig = async () => {
  let res: any = await system.getSystemConfig();
  // console.log('-----------------------', res)
  let data: any = {
    "ldap-enabled": res.data["ldap-enabled"],
    systemName: res.data["system.name"],
    systemLogo: res.data["system.logo"],
    systemPcUrl: res.data["system.pc_url"],
    systemH5Url: res.data["system.h5_url"],
    resourceUrl: res.data["resource_url"],
    memberDefaultAvatar: res.data["member.default_avatar"],
    courseDefaultThumbs: res.data["default.course_thumbs"],
    departments: res.data["departments"],
    resourceCategories: res.data["resource_categories"],
  };
  SystemStore.setConfig(data)
};

const onFinish = async () => {
    if (!formState.email) {
    message.error("请输入管理员邮箱账号");
    return;
  }
  if (!formState.password) {
    message.error("请输入密码");
    return;
  }
  await handleSubmit();
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const disabled = computed(() => {
  return !(formState.email && formState.password);
});
</script>


<style scoped lang="scss">
.login-content {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.banner {
  width: 100%;
  height: 640px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.login-box {
  width: 880px;
  height: 560px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.1);
  position: absolute; 
  top: 50%;
  left: 50%;
  margin-left: -440px;
  margin-top: -280px;
  display: flex;
  z-index: 2;

  .left-box {
    width: 440px;
    height: 100%;
    box-sizing: border-box;
    padding: 90px 10px 80px 30px;
    display: flex;
    align-items: center;
    img {
      width: 400px;
      height: auto;
    }
  }

  .right-box {
    width: 440px;
    height: 100%;
    box-sizing: border-box;
    padding: 90px 30px 50px 30px;
    display: flex;
    flex-direction: column;

    .title {
      width: 120px;
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      line-height: 30px;
      border-bottom: 4px solid #ff4d4f;
      padding-bottom: 10px;
      margin-bottom: 40px;
    }

    .form-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      :deep(.ant-form-item) {
        margin-bottom: 30px;
      }
    }
  }
}

.footer-box {
  width: 880px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -440px;
  margin-top: 220px;
}
</style>